<template>
    <div class="flowswitch_container">
        <div class="btn_bar">
            <div class="dxcr_btn">
                <!-- <el-switch v-model="data.state" 
					class="main-el-switch" 
					active-text="效果开启"  
					inactive-text="效果关闭"
					active-color="#74b3ff"
					inactive-color="#9da2a8"
					active-value="1"
					inactive-value="0"
					@change="switchClick(data.state)"
			   ></el-switch> -->
                <!-- <el-select style="width: 100px" v-model="data.type" placeholder="请选择" @change="typeChange">
                    <el-option v-for="item in data.options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select> -->
                <!-- <el-select style="width: 100px;margin-left: 10px;" v-model="data.type1" placeholder="请选择" @change="typeChange">
                    <el-option v-for="item in data.options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select> -->
            </div>
        </div>
    </div>
</template>
<script setup>
import {
    defineComponent,
    ref,
    reactive,
    computed,
    toRefs,
    onMounted,
    watch
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
import mitt from '@/utils/mitt.js'
const emit = defineEmits(["switch"])
const getRoute = useRoute()
const router = useRouter()

const gdFLow = computed(() => store.getters.gdFLow)
switchClick(gdFLow.value)

const data = reactive({
    state: "1",
    options: [{
        value: '0',
        label: '全部'
    },{
        value: '长输管道',
        label: '长输管道'
    }, {
        value: '集输管道',
        label: '集输管道'
    }],
    options1: [{
        value: '0',
        label: '全部'
    },{
        value: '原油',
        label: '原油'
    }, {
        value: '天然气',
        label: '天然气'
    }],
    type: "0",
    type1:'0'
})
onMounted(() => {
})

watch(gdFLow, (val) => {
    switchClick(val)
})

function switchClick(val) {
    emit("switch", val)
}

function typeChange(val) {
    store.commit('app/setPipelineSwitch', data.type+","+data.type1)
}


</script>
<style lang="scss" scoped>
.flowswitch_container {
    position: absolute;
    top: 60px;
    left: 10px;

    ::v-deep .main-el-switch {
        position: relative;

        .el-switch__core {
            height: 24px;
            border-radius: 12px;
            min-width: 80px;
            font-size: 18px;

            &:after {
                left: 4px;
                top: 3px;
            }
        }

        &.el-switch {
            &.is-checked {
                .el-switch__core {
                    &:after {
                        margin-left: -20px;
                        left: 100%;
                    }
                }
            }
        }

        &.is-checked {
            .el-switch__label--left {
                opacity: 0;
            }

            .el-switch__label--right {
                opacity: 1;
            }
        }

        .el-switch__label {
            position: absolute;
            top: 0;

            line-height: 31px;
        }

        .el-switch__label * {
            font-size: 12px !important;
        }

        .el-switch__label--left {
            right: 0;
            color: #747881;
            z-index: 1;
            margin-right: 8px;

        }

        .el-switch__label--right {
            left: 0;
            color: #488bcb;
            opacity: 0;
            margin-left: 8px;
        }
    }
}
</style>